import React, { useState, useEffect, Component } from 'react';
import marked from 'marked'
import '../static/css/AddArticle.css'
import { Row, Col, Input, Select, Button, DatePicker,message } from 'antd'
import axios from 'axios';
import servicePath from '../config/apiUrl';
var fs = require('fs');

const { Option } = Select;
const { TextArea } = Input
// Hooks方法
function AddArticle(props) {
    console.log(fs)
    // 制作编辑器 解析markdowm原因转化成简单的HTML
    const [articleId,setArticleId ] =useState(0);//文章id,如果是0说明是新增加，如果不是0，说明是修改
    const [articleTitle,setArticleTitle]=useState('')//文章标题
    const [articleContent,setArticleContent]=useState('')//markdown的编辑内容
    const [markdownContent, setMarkdownContent] = useState('预览内容') //html内容
    const [introducemd,setIntroducemd] = useState()            //简介的markdown内容
    const [introducehtml,setIntroducehtml] = useState('等待编辑') //简介的html内容
    const [showDate,setShowDate] = useState()   //发布日期
    const [updateDate,setUpdateDate] = useState() //修改日志的日期
    const [typeInfo ,setTypeInfo] = useState([]) // 文章类别信息
    const [selectedType,setSelectType] = useState('请选择类型') //选择的文章类别id
    // new render 进行markdowm编码解析成HTML。mardown编码跟
    const renderer = new marked.Renderer()
    marked.setOptions({
    renderer: renderer,
    gfm: true,
    pedantic: false,
    sanitize: false,
    tables: true,
    breaks: false,
    smartLists: true,
    smartypants: false,
    })

   // 实时预览接续markdowm
   const changeContent =(e)=>{
    //    只是一个markdowm内容文本
       setArticleContent(e.target.value)
       let html = marked(e.target.value)
    //解析后的html赋值给markdownContent
       setMarkdownContent(html)
   }
   const changeIntroduce  =(e)=>{
    //    只是一个markdowm内容文本
    setIntroducemd(e.target.value)
   let html = marked(e.target.value)
    //解析后的html赋值给markdownContent
    setIntroducehtml(html)
   }
//    获取文章类别
const getTypeInfo=()=>{
    axios({
        method:"get",
        url:servicePath.getTypeInfo,
        // 请求头可设置不设置
        // 跨域检验cookie
        withCredentials:true
    }).then((res=>{
             console.log(res)
             if (res['data']['data']=='没有登录') {
                 localStorage.removeItem('openId')
                 props.history.push('/') 
             }else{
                //登录成功,设置值
                setTypeInfo(res.data.data)

               }
    }))
}
// 获取query参数
const quer=()=>{
    if (props.location.search) {
        var str =props.location.search
        var arr= str.split('=')
     
        var id = arr[1]-0
        setArticleId(id)
    }
    console.log(props.location.search,arr)
}
// 页面更新获取文章类别数据
useEffect(()=>{
    getTypeInfo();
    quer()
    
    // 第二个参数防止不断渲染调用
},[])
// 选择时获取选择文章类别id
const selectTypeHandler=(value)=>{
    console.log(value)
    // 把值赋值给selectedType
    setSelectType(value)

}

// 所有初始值都已经可操作性直接使用后边写保存方法

const saveArticle = ()=>{
    if(!selectedType){
        message.error('必须选择文章类别')
        return false
    }else if(!articleTitle){
        message.error('文章名称不能为空')
        return false
    }else if(!articleContent){
        message.error('文章内容不能为空')
        return false
    }else if(!introducemd){
        message.error('简介不能为空')
        return false
    }else if(!showDate){
        message.error('发布日期不能为空')
        return false
    }
    message.success('检验通过')
    let dataProps={}   //传递到接口的参数
    dataProps.type_id = selectedType 
    dataProps.title = articleTitle
    dataProps.article_content =articleContent
    dataProps.introduce =introducemd
    let datetext= showDate.replace('-','/') //把字符串转换成时间戳
    dataProps.addTime=showDate
    // dataProps.addTime =(new Date(datetext).getTime())/1000
    if (articleId==0) {
        dataProps.view_count =Math.ceil(Math.random()*100)+1000
        axios({
            method:'post',
            url:servicePath.addArticle,
            data:dataProps,
            withCredentials:true
        }).then((res)=>{
            //返回数据 {isScuccess: true, insertId: 3}
            console.log(res)
            if(res.data.isScuccess){
                message.success('文章保存成功')
            }else{
                message.error('文章保存失败');
            }
        })
    }else{
        // 只有修改拿到修改文章的ID放入传值数据（）
        dataProps.id = articleId 
        axios({
            method:'post',
            url:servicePath.updateArticle,
            header:{ 'Access-Control-Allow-Origin':'*' },
            data:dataProps,
            withCredentials: true
        }).then(
            res=>{
    
            if(res.data.isScuccess){
                message.success('文章修改成功')
            }else{
                message.error('修改失败');
            }
    
    
            }
        )
    }
  
}
    return (
        <div>
            
            <Row gutter={5}>
                {/* 左边部分18格布局 */}
                <Col span={18}>
                    <Row gutter={10}>
                        <Col span={20}>
                            <Input placeholder='博客标题' value={articleTitle} size='large' onChange={e=>{setArticleTitle(e.target.value)}}></Input>
                        </Col>
                        <Col span={4}>
                            {/* 获取文章类别列表 */}
                            <Select defaultValue={selectedType} size="large" onChange={selectTypeHandler}>
                                {typeInfo.map((item,index)=>{
                                return (<Option value={item.Id} key={index}>{item.typeName}</Option>)
                                })}
                                
                            </Select>
                        </Col>
                    </Row>
                    <Row gutter={10}>
                        <Col span={12}>
                            <TextArea className='markdown-content' rows={35} placeholder='文章内容' onChange={changeContent}></TextArea>
                        </Col>
                        <Col span={12}>
                            {/* 标签里面不能写内容，不然会报错 */}
                            <div className='show-html' dangerouslySetInnerHTML={{__html:markdownContent}}></div>
                        </Col>
                    </Row>
                </Col>
                {/* 右边部分18+6=24布局 */}
                <Col span={6}>
                    {/* 发布 */}
                    <Row>
                        <Col span={24}>
                            <Button size='large'> 暂存文章</Button> &nbsp;
                    <Button type="primary" size='large' onClick={saveArticle}> 发布文章</Button>
                        </Col>
                        <Col span={24}>
                            <br />
                            {/* marrkdown */}
                            <TextArea rows={4} placeholder='文章简介' onChange={changeIntroduce}></TextArea>
                            <br />
                            {/* mardown预览 */}
                            <div className="introduce-html" dangerouslySetInnerHTML={{__html:introducehtml}}></div>
                        </Col>
                        <Col span={12}>
                            <div className="date-select">
                                <DatePicker
                                    placeholder="发布日期"
                                    size="large"
                                    onChange={(Date,dataString)=>{setShowDate(dataString)}}
                                   
                                />
                            </div>
                        </Col>
                    </Row>
                </Col>
            </Row>
        </div>
    )
}
export default AddArticle;